<template>
	<view class="live_container">
		<view class="live_box">
			<!-- <view class="live_top_box">
				<view class="" @click="handleLiveRule('liveRule')">
					直播规则
				</view>
			</view> -->

			<view class="live_middle_box">
				<view class="live_middle_img_box">
					<image :src="douyinLiveImg" mode="widthFix" class="live_middle_img"></image>
				</view>

				<view class="live_input_box">
					<view class="live_input_title">
						请输入抖音账号
					</view>
					<view class="live_input_all">
						<u-input v-model="douyinCode" :border="false" :clearable="false" placeholder="请输入您的抖音号"
							placeholder-style="font-family: all-font;" />
					</view>
					<view class="live_input_all">
						<u-input v-model="douyinUid" :border="false" :clearable="false" placeholder="请输入您的抖音UID"
							placeholder-style="font-family: all-font;" />
					</view>
				</view>
			</view>

			<view class="live_bottom_box" @click="handleLiveRule('goLive')">
				<image src="/static/my/icon-play.png" mode="" class="live_bottom_img"></image>
				<view class="">
					去直播
				</view>
			</view>

			<view class="live_apply_btn" @click="handleCheckApply">
				申请记录
			</view>

			<live-rule @handleCheckUid="handleCheckUid" />
		</view>

		<!-- 直播规则弹窗 -->
		<live-rule-popup ref="refLiveRulePopup" :liveMsg="liveMsg" @handleCheckUid="handleCheckUid"
			@submitRule="submitRule" />
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '@/utils/common.js'
	import LiveRulePopup from './components/liveRulePopup.vue'
	import LiveRule from './components/liveRule.vue'
	export default {
		components: {
			LiveRulePopup,
			LiveRule
		},
		data() {
			return {
				douyinLiveImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668397df1abb5_1719900127.png',
				douyinCode: '',
				douyinUid: '',
				showLiveRule: false,
				liveMsg: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 抖音直播申请
			addDyLiveApply() {
				this.$request('/api/addDyLiveApply', {
					dy_uid: this.douyinUid,
					dy_code: this.douyinCode
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '申请成功，请等待审核',
							icon: 'none',
							success: res => {
								this.showLiveRule = false
								this.douyinUid = ''
								this.douyinCode = ''
							}
						})
					} else {
						uni.showToast({
							title: '申请失败，请重试',
							icon: 'none'
						})
						return
					}
				})
			},

			// 查看申请记录
			handleCheckApply() {
				uni.navigateTo({
					url: '/pages/my/douyinRecord/douyinRecord'
				})
			},

			// 直播规则
			handleLiveRule(val) {
				this.liveMsg = val
				if (val == 'liveRule') {
					this.$refs.refLiveRulePopup.showLiveRule = true
				} else if (val == 'goLive') {
					if (this.douyinCode == '') {
						uni.showToast({
							title: '请输入您的抖音号',
							icon: 'none'
						})
						return
					} else if (this.douyinUid == '') {
						uni.showToast({
							title: '请输入您的抖音UID',
							icon: 'none'
						})
						return
					} else {
						this.$refs.refLiveRulePopup.showLiveRule = true
					}
				}
			},

			// 我已知晓
			submitRule() {
				this.addDyLiveApply()
			},

			// 查看抖音uid
			handleCheckUid(val) {
				uni.navigateTo({
					url: '/pages/my/douyinWebview/douyinWebview?url=' + val
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.live_container {
		padding: 30rpx 20rpx 50rpx;
		background: #fff;

		.live_box {

			.live_top_box {
				display: flex;
				justify-content: flex-end;
				font-family: all-font;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				padding: 40rpx 10rpx 62rpx 0;
			}

			.live_middle_box {
				position: relative;

				.live_middle_img_box {
					width: 100%;

					.live_middle_img {
						width: 100%;
					}
				}

				.live_input_box {
					position: absolute;
					top: 76rpx;
					left: 50%;
					transform: translateX(-50%);

					.live_input_title {
						font-family: all-font;
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
						padding-bottom: 65rpx;
					}

					.live_input_all {
						display: flex;
						align-items: center;
						width: 637rpx;
						height: 87rpx;
						background: #FAFAFA;
						box-shadow: 0px 8rpx 10rpx 1px rgba(213, 213, 213, 0.39);
						border-radius: 10rpx;
						border: 1px solid #DBDBDB;
						padding-left: 27rpx;
						margin-bottom: 38rpx;
					}
				}
			}

			.live_bottom_box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 706rpx;
				height: 76rpx;
				background: linear-gradient(0deg, #578EFF, #62EEFF);
				box-shadow: 0px 6rpx 5rpx 0px rgba(67, 152, 255, 0.39);
				border-radius: 38rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-top: 35rpx;

				.live_bottom_img {
					width: 40rpx;
					height: 40rpx;
					font-family: all-font;
					margin-right: 26rpx;
				}
			}

			.live_apply_btn {
				color: #888;
				font-size: 30rpx;
				font-family: all-font;
				text-align: center;
				padding-top: 30rpx;
			}
		}
	}
</style>